﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习5：制作畅销书排行榜</title>
    <style>
         *{
            margin:0px auto;
            padding:0px;  
            
       }
        div{
            width: 250px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-indent: 1em;
            background-color: #518700;
            vertical-align: center;
            color: white;
        }
        ul{
            width: 250px;
            height:300px;
            background-image: linear-gradient(#F9FBCB,#F8F8F3);
            font-size: 12px;
            color: #1a66b3;
            text-indent:24px;
        }
        li:nth-child(1){
            background:url(image/book_no01.gif) left center no-repeat;
        }
        li:nth-child(2){
            background:url(image/book_no02.gif) left center no-repeat;
        }
        li:nth-child(3){
            background:url(image/book_no03.gif) left center no-repeat;
        }
        li:nth-child(4){
            background:url(image/book_no04.gif) left center no-repeat;
        }
        li:nth-child(5){
            background:url(image/book_no05.gif) left center no-repeat;
        }
        li:nth-child(6){
            background:url(image/book_no06.gif) left center no-repeat;
        }
        li:nth-child(7){
            background:url(image/book_no07.gif) left center no-repeat;
        }
        li:nth-child(8){
            background:url(image/book_no08.gif) left center no-repeat;
        }
        li:nth-child(9){
            background:url(image/book_no09.gif) left center no-repeat;
        }
        li:nth-child(10){
            background:url(image/book_no10.gif) left center no-repeat;
        }
        li{
            width:250px;
            line-height: 28px;
            list-style: none;
            margin-left:30px;
        }
        li a:link{
            text-decoration: none;
        }
        li a:hover{
            text-decoration: underline;
        }

    </style>
</head>
<body>
<div>畅销书排行&nbsp;<img src="image/bang.gif" align="center"/></div>
<ul>
    <li><a href="#" >不抱怨的世界(畅...</a></li>
    <li><a href="#" >遇见未知的自己...</a></li>
    <li><a href="#" >活法（季羡林、...</a></li>
    <li><a href="#" >高效能人士的七个习惯</a></li>
    <li><a href="#" >被迫强大（北外女生香奈儿...</a></li>
    <li><a href="#" >遇见心想事成的自己（《遇...</a></li>
    <li><a href="#" >世界上最伟大的推销员（插...</a></li>
    <li><a href="#" >我的成功可以复制（唐骏亲...</a></li>
    <li><a href="#" >少有人走的路：心智成熟的...</a></li>
    <li><a href="#" >活出全新的自己——唤醒...</a></li>
</ul>
</body>
</html>